<template>
    <div class="tm-cell-group" :style="style">
        <slot></slot>
    </div>
</template>
<script>
    import { reactive, toRefs } from 'vue'
    export default {
        name: 'tm-cell',
        props: {
            radius: {
                type: Boolean,
                default: true
            }
        },
        setup(props) {
            const state = reactive({
                style: ''
            })

            if (props.radius) {
                state.style += 'border-radius: 5px;'
            }

            return {
                ...toRefs(state)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tm-cell-group {
        padding: 0 12px;
        background-color: $color-white;
    }
</style>